<template>
  <div class="song-list-wrap">
    <div class="list-title-wrap">
      <div class="single-song">单曲</div>
      <div>
        <div class="playAll">播放</div>
      </div>
    </div>
    <ul>
      <!-- <li class="song-item" v-for="each in 3" :key="each"><span class="song_title">环绕</span><span class="author">作者</span><span>-专辑</span></li> -->
      <li
        @click="handlePlay(each,index)"
        class="song-item"
        v-for="(each, index) in list"
        :key="index"
      >
        <span class="song_title">{{ each.name }}</span
        ><span class="author">{{ each.artists[0].name }}</span
        ><span>-{{ each.album.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { getPlayMusic } from "@/http/Home/home";
import {getSongdetail} from '@/http/Play/Play';
import { mapGetters, mapMutations } from "vuex";
export default {
  props: {
    songList: {
      type: Array,
      //   required: true,
      default: () => [],
    },
  },
  data() {
    return {
      list: this.songList,
    };
  },
  computed: {
    ...mapGetters(["getAudio", "getSongMsg"]),
  },
  methods: {
      ...mapMutations(['SET_SONG_MSG']),
    async handlePlay(item,index) {
      let {id} = item; 
      let res = await getPlayMusic({ id });
      let resLyric = await getPlayMusic({ id ,type:'lyric'});
      // console.log(resLyric.data.lrc.lyric)
      // console.log('这里是歌词')
      let response =await getSongdetail({id:item.id});
      let sourceUrl = res[0].url;
      if (sourceUrl === "") {
        this.$toast.fail("暂无资源");
        return false;
      }
      let audio = this.getAudio;
      audio.setAttribute("src", sourceUrl);
      audio.play();
      let lyric = resLyric.data.lrc.lyric || {};
      this.SET_SONG_MSG(Object.assign(response.data.songs[0].al,item,{recordIndex:index},{lyric:lyric}))
      console.log(this.getSongMsg);;
        this.$router.push("/play");
    },
  },
  watch: {
    songList(val) {
      this.list = val;
      console.log(this.list);
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
@import url("../assets/Song-list/index.less");
@import url("../assets/public/common.less");
</style>